<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				padding-bottom: 51px;
			}
		</style>
	</head>

	<body>
		
		<script src="js/util.js"></script>
		<script type="text/javascript">
			(function() {
				mui.init({
					subpages: [{
				      url: 'html/top-tab/top-tab-main.html',//子页面HTML地址，支持本地地址和网络地址
				      id: 'html/top-tab/top-tab-main.html',//子页面标志
				      styles:{
				        top: 0,//子页面顶部位置
				        bottom: 0,//子页面底部位置
				      },
				      extras:{}//额外扩展参数
				   }]
				});
				mui.plusReady(function() {
					// 创建子webview窗口 并初始化
					var aniShow = {};
					util.initSubpage(aniShow);
					
					var 	nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = util.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;
						
					/**
					 * 根据判断view控件点击位置判断切换的tab
					 */
					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if(clientX > 0 && clientX <= parseInt(pageW * 0.33)) {
							currIndex = 0;
//							util.changeTitle('首页');
						} else if(clientX > parseInt(pageW * 0.33) && clientX <= parseInt(pageW * 0.66)) {
							currIndex = 1;
//							util.changeTitle('VIP');
						} else {
							currIndex = 2;
//							util.changeTitle('个人中心')
						}
						// 匹配对应tab窗口	
						if(currIndex > 0) {
							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
						} else {
							targetPage = plus.webview.currentWebview();
						}

						if(targetPage == activePage) {
							return;
						}

//						if(currIndex !== 3) { 
							//底部选项卡切换
							util.toggleNview(currIndex);
							// 子页面切换
							util.changeSubpage(targetPage, activePage, aniShow);
							//更新当前活跃的页面
							activePage = targetPage;
//						}
					});
					console.log(plus.webview.all())
				});
			})();
		</script>
	</body>
</html>